<template>
  <el-container>
    <el-aside style="width: 200px;margin-top: 20px">
      <switch></switch>
      <!-- 侧边栏 -->
      <side-menu @indexSelect="listByCategory" ref="sideMenu" :categories="categories"></side-menu>
    </el-aside>
    <!-- 书籍显示主界面 -->
    <el-main>
      <books class="books-area" ref="booksArea"></books>
    </el-main>
  </el-container>
</template>

<script>
import SideMenu from './SideMenu.vue'
import Books from './Books.vue'
export default {
  name: 'AppLibrary',
  components: {
    SideMenu,
    Books
  },
  data () {
    return {
      // 书籍类别
      categories: []
    }
  },
  // 获取所有书籍类别
  created () {
    this.gainCategories()
  },
  methods: {
    listByCategory () {
      var _this = this
      var cid = this.$refs.sideMenu.cid
      var url = '/categories/'+cid+'/books'
      this.$axios.get(url).then(resp => {
        if (resp && resp.status === 200) {
          _this.$refs.booksArea.books = resp.data
        }
      })
    },
    // 获取书籍所以分类给子组件使用
    gainCategories () {
      var _this = this
      this.$axios.get('/categories').then(resp => {
        if(resp && resp.status === 200){
          _this.categories = resp.data
        }
      })     
    }
  }
}
</script>

<style scoped>
  .books-area {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
  }
</style>
